<template>
  <div class="top">
    <!-- 若用户没有登录就显示 ↓ -->
    <div v-if="!login">
      <a href="/login">注册/登录</a>
      <p>在分享笔记前，记得先注册登录哦，点击上面的按钮进去登录/注册页面</p>
    </div>
    <!-- 若用户登陆了就显示 ↓ -->
    <div v-if="login" class="top">
      <!-- 若获取用户头像成功，就显示用户头像 -->
      <img v-if="header" :src="defaultImg[0]" alt="头像"  @click="toUserLately"/>
      <!-- 若获取用户头像失败，判断用户性别，显示默认头像  -->
      <img
        v-if="!header" @click="toUserLately"
        :src="userData.sex == 'boy' ? defaultImg[1] : defaultImg[2]"
        alt="头像"
      />
      <div class="hoverMsg">
        <h2>{{ userData.username }}</h2>
        <ul>
          <li @click="logout"><span></span>注销</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getCookie,removeCookie } from "@/tool/ToolCookie";
export default {
  data() {
    return {
      // 头像是否获取成功标志位
      header: false,
      // 头像地址数组
      defaultImg: [
        "http://localhost:8181/user/header/" + getCookie("userId"),
        require("@/assets/boyUser.jpg"),
        require("@/assets/girlUser.jpg"),
      ],
      // 用户信息
      userData: {},
    };
  },
  computed: {
    // 用户是否登录
    login() {
      return getCookie("userId") != null;
    },
  },
  methods:{
    // 点击注销按钮事件
    logout(){
        if(confirm("确定退出登录吗？")) {
            // 删除Cookie
            removeCookie("userId")
            // 刷新页面
            this.$router.go(0)
        }
    },
    // 点击头像跳转到用户最近作品页面
    toUserLately(){
      // 配置参数
      let value = {
        id:getCookie("userId")
      }
      this.$router.push({
        name:'lately',
        query:value
      })
    },
  },
  mounted() {
    // 判断用户是否登录
    if(getCookie("userId")==null) {
      // 未登录就不请求用户信息
      return
    }
    // 读取用户头像
    this.$axios({
      method: "get",
      url: "http://localhost:8181/user/header/" + getCookie("userId"),
    }).then(
      (res) => {
        // 若头像获取成功
        if (res.data != false) {
          this.header = true;
        }
        // 头像获取失败，使用默认头像
      },
      (err) => {
        console.log(err);
      }
    );
    // 获取用户信息
    this.$axios({
      method: "post",
      url: "http://localhost:8181/user/findUserById/" + getCookie("userId"),
    }).then(
      (res) => {
        this.userData = res.data;
      },
      (err) => {
        console.log(err);
      }
    );
  },
};
</script>

<style scoped>
.top a {
  display: inline-block;
  position: absolute;
  text-decoration: none;
  color: #fff;
  background-color: #20202a;
  border-radius: 30px;
  width: 20%;
  height: 30%;
  text-align: center;
  line-height: 33px;
  top: 30%;
  left: 10%;
}

.top p {
  position: absolute;
  top: 60%;
  left: 5%;
  color: #39383e;
  font-size: x-small;
  font-weight: 700;
}

img {
  position: absolute;
  top: 10px;
  right: 40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #55556d6d;
  border: solid 4px #55556d;
  cursor: pointer;
  z-index: 20;
}

.hoverMsg {
  position: absolute;
  top: 20px;
  right: 110px;
  transition: all 0.5s;
  width: 100px;
  height: 70px;
  overflow: hidden;
}
.top:hover ul {
  right: 0;
}
.top:hover h2 {
  right: 20px;
}
h2 {
  position: absolute;
  top: 0;
  right: -100px;
  transition: all 0.5s;
  color: #fff;
}
ul {
  position: absolute;
  bottom: 0;
  right: -100px;
  list-style: none;
  transition: all 0.5s;
  background-color: #1f1f27;
  width: 80px;
  height: 35px;
  margin-top: 5px;
  overflow: hidden;
  padding: 0 10px 0 5px;
  border-radius: 10px 0 0 10px;
}
li {
  margin: 3px 0 3px 0;
  line-height: 30px;
  font-weight: 600;
  padding: 0 10px 0 5px;
  color: #55556d;
  cursor: pointer;
}
li:hover {
    color: coral;
}

span {
  font-family: 'icomoon';
  margin: 0 3px 0 5px;
}
</style>